<template>
	<el-col :span="24" class="All">
		<el-col :span="2" class="spanInfo">
			<div class="searchIP">
				<el-input v-model="searchIP" placeholder="搜索IP" clearable></el-input>
			</div>
			<div class="textLable">
				<template v-for="(item) in columnsFn">
					<el-button class="IpButton" :class="{'selected': item.selected}" type="primary"
						@click="handSearchIp(item)" plain :key="item.MONID">
						{{ item.IP }}
					</el-button>
				</template>
			</div>
		</el-col>
		<el-col :span="22" class="TableInfo">
			<div class="container">
				<v-historyToolBar :fullPath="postData.opera" @pickerDate="getPickerDate" @selectOpera="getSelectOpera"
					@inputFilter="getInputFilter" :operaOption="operaOption" :tableData="tableData"
					:toolDisabled="loading" :isShowfre="false">
				</v-historyToolBar>
				<div class="netload">
					<v-NetworkTraffic v-loading="loading" element-loading-text="拼命加载中"
						element-loading-spinner="el-icon-loading" :allData="allData"
						v-if="this.postData.opera=='Mysqlnetwork'">
					</v-NetworkTraffic>
					<!-- <v-HistServerMemoryLoad
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        :allData="allData"
                        v-if="this.postData.opera=='MemoryUsageHistory'">
                    </v-HistServerMemoryLoad>
                    <v-HistServerFileSystem
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        :allData="allData"
                        v-if="this.postData.opera=='FileSystemHistory'">
                    </v-HistServerFileSystem> -->
				</div>
			</div>
		</el-col>


	</el-col>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js'
	import vPagination from 'common/Pagination.vue';
	import vHistoryToolBar from 'historyData/HistoryToolBar.vue';
	import vNetworkTraffic from 'historyData/dataBase/dbMysql/NetworkTraffic.vue';


	export default {
		components: {
			vPagination,
			vHistoryToolBar,
			vNetworkTraffic
		},
		data() {
			return {
				postData: {
					opera: '',
					curPage: 1,
					pageSize: 1000000,
					filtersType: 'fuzzyquery',
					filters: {
						"CID": "",
						"StartTime": '',
						"EndTime": '',
					}
				},
				tableData: [],
				allData: {},
				dataTotal: 0,
				searchJson: {},
				operaOption: [{
						label: '网络流量',
						value: 'Mysqlnetwork',
						filter: ''
					},
					// { label: '内存', value: 'MemoryUsageHistory', filter: '' },
					// { label: '文件系统', value: 'FileSystemHistory', filter: { mounted_on: '指定挂载点...' } }
				],
				postSearchData: {
					opera: 'MysqlMessagespace',
					curPage: 1,
					pageSize: 1000000,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {}
				},
				columns: [],
				TextDatabace: {},
				searchIP: '',
				selectedIP: '',
				loading: true
			}
		},
		created() {
			this.getSearchData();
		},
		computed: {
			columnsFn() {
				return this.columns.filter((d) => {
					if (d.IP.includes(this.searchIP)) {
						d['selected'] = false;
						if (d.CID == this.postData.filters.CID) {
							d['selected'] = true;
						}

						return d;
					}
				});
			},
		},
		methods: {
			getSearchData() {
				fetchData({
					postSearchData: JSON.stringify(this.postSearchData)
				}).then((res) => {

					this.columns = res.data;
					// 初始化时，选中第一个节点
					if (this.columns.length > 0) {
						this.dbClickFirst();
						// this.getTableData();
					}
				});
			},
			TalallColorMethod(percentage) {
				if (percentage <= 50) {
					return '#67c23a';
				} else if (percentage <= 75) {
					return '#e6a23c';
				} else {
					return '#f56c6c';
				}
			},
			TalallColorMethod2(percentage) {
				if (percentage <= 50) {
					return '#f56c6c';
				} else if (percentage <= 75) {
					return '#e6a23c';
				} else {
					return '#67c23a';
				}
			},
			handSearchIp(item) {
				this.postData.filters.CID = item.CID;

				// this.getTableData();
			},
			dbClickFirst() {
				this.handSearchIp(this.columns[0]);
				this.getTableData();
				// console.log("已选择");
			},
			getTableData() {
				this.loading = true;

				fetchData({
					postData: JSON.stringify(this.postData)
				}).then((res) => {
					this.dataTotal = res.dataTotal;
					// this.tableData = res.data;

					this.allData = res;
					this.loading = false;

				});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			// 获取子组件选择的时间
			getPickerDate(pickerDate) {
				this.postData.curPage = 1;
				for (const key in pickerDate) {
					this.postData.filters[key] = pickerDate[key];
				}

				this.getTableData();
			},
			getSelectOpera(item) {
				this.postData.curPage = 1;
				this.postData.opera = item.value;
				// 删除后台可能无法识别的 filters 条件
				for (const key in this.postData.filters) {
					if (key != 'CID' && key != 'StartTime' && key != 'EndTime') {
						delete this.postData.filters[key];
					}
				}

				this.getTableData();
			},
			getInputFilter(data) {
				this.postData.curPage = 1;
				for (const key in data) {
					if (data.hasOwnProperty(key)) {
						const element = data[key];
						this.postData.filters[key] = element;
					}
				}

				this.getTableData();
			}
		},
		watch: {
			//     loading: {  
			// 　　　　handler(newValue, oldValue) {
			//             console.log("------发--------");
			//             console.log(newValue, oldValue);
			// 　　　　}
			// 　　} 
		}
	}
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.spanInfo {
		padding-right: 10px !important;
	}

	.searchIP {
		padding-bottom: 10px;
	}

	.textLable>>>.el-button+.el-button {
		margin-left: 0px !important;
	}

	.IpButton {
		width: 100%;
		font-size: 14px;
	}

	.textLable .IpButton.selected {
		color: rgb(255, 255, 255);
		background: rgb(64, 158, 255);
	}

	.All {
		height: 100%;
	}

	.spanInfo {
		height: 100%;
	}

	.TableInfo {
		height: calc(100% - 20%);
	}

	.container {
		height: 100%;
	}

	.TableInfo .netload {
		height: calc(100% - 10px);
	}
</style>
